<template>
  <div class="audioBook">
    <div class="head">
      <h2 class="title">{{ $t("public.audioBooks") }}</h2>
      <router-link to="/audio-book/all"
        >{{ $t("public.more") }}<i class="el-icon-arrow-right"></i
      ></router-link>
    </div>
    <!-- v-if="list !== undefined && list.length > 0" -->
    <ul class="audioBookList">
      <list-template
        v-for="item of list"
        :key="item.catalogueId"
        :item="item"
        :diff="'audioBook-box'"
        class="item-box"
      />
    </ul>
  </div>
</template>

<script>
import listTemplate from "@/components/common/listTemplate/Index";
export default {
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  components: {
    listTemplate,
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.audioBook {
  .audioBookList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -15px;
    .item-box {
      padding: 0 15px;
      flex: 0 0 25%;
      max-width: 25%;
    }
  }
}
</style>
